從今天開始，鐵人賽的文章進度踏入了佈景主題設計實戰系列。此系列的文章是關於如何從開始構思一個新的佈景主題的設計，到最後將它上架到 WordPress 官方的佈景主題目錄，開放給大眾免費下載使用。

在前一篇文章討論到，設計一個新的佈景主題，必須在傳統以及區塊兩個路線中做出一個選擇。試著在站使用者的角色來考量，挑選一個佈景主題的流程：

1. 在後台或在 wordpress.org 的佈景主題目錄搜尋主題。
2. 按下預覽畫面，看看顏色、字體、佈局等等。
3. 整體感覺還滿意，下載安裝來用看看。不滿意，繼續搜尋。

不知道讀者們在挑選佈景主題的動線是否也是如此？對於區塊佈景主題來說，它的預覽畫面是非常地陽春的，雖然我們可以看到有些網站用區塊佈景主題做的很漂亮，例如 J Space Center 故事旅程。

圖：J Space Center 故事旅程 - 網站首頁

一般使用者比較難去想像一個陽春的預覽畫面如何變成想像中的樣子。這也是很多在 ThemeForest 網站進行銷售的佈景主題，都會提供匯入 Demo，先變成使用者中想像中的樣子的大致版本，以提供使用者稍加修改，就可以達成需求。

採用傳統架構

在這次的佈景主題設計實戰系列，採用傳統佈景主題的架構來設計，基於以下考量：

1. 廣泛支援 WordPress 版本，視佈景主體裡使用的函式最低支援的版本而定。
2. 許多商業的佈景主題都是傳統的架構，學習傳統的架構，有助於客製化。
3. 預覽的畫面和實際上線的差異不高，使用者樂於嘗試採用。
4. 自訂項目選單，提供直覺的設定選項。

取之於社群，用之於社群，雖然是無償貢獻給社群，不過呢，當越多人採用你設計的佈景主題，還是有些許回報的。在頁尾的版權連結 (credit link) 連至你的網站，有些許的 SEO 加分效果，因此設計一個作品，能否讓廣大使用者樂於使用，才是優先考量。

主題命名

為了要上架到 WordPress 佈景主題目錄，首先要確定我們命名的主題名稱，沒有被使用。

圖：WordPress 佈景主題目錄

來到 WordPress 的佈景主題目錄，在右上角的搜尋框進行搜尋。例如：「ironman」鐵人，是這次佈景主題設計實戰所示範的名稱。

圖：佈景主題目錄搜尋

很幸運的是，搜尋結果顯示並沒有人使用。有一個例外情況是，這個名稱有被使用過，但因故下架了，名稱被佔用，仍顯示找不到佈景主題。如果最後我們上架佈景主題時，遇到審核團隊回信說明是這種情況，屆時再改名稱就好。

設計規劃

挑選基底

挑選一個官方的傳統佈景主題作為基底，因為官方的架構已經定好，比較好跟隨著官方制定的習慣走。

圖：建立目錄

例如，將 twentytwentyone 另外複製一個新目錄，然後改名為 ironman。用 VSCode 打開 ironman 目錄，此時 VSCode 的工作區域 (workspace) 就在這個目錄。

刪除檔案

我們的主要目的是以這個 twentytwentyone 為基底，裡面的部分檔案不是我們要的，可以把它刪除，例如：

package.json
postcss.config.js
package-lock.json
.stylelintrc.json
.stylelintrc-css.json
.stylelintignore

這些是 twentytwentyone 用來打包 style.css 檔案以及強制規範 CSS 的寫作風格用的，我們可以使用自己慣用的工具，因此這些都直接刪除。

裡面有些功能，例如提供的一些範本檔案，不要帶上的也刪除。

字串搜尋、取代

• 進行字串的搜尋，將「Twenty Twenty-One」取代為「Ironman」
• 進行字串的搜尋，將「twentytwentyone」取代為「ironman」

這樣大部分翻譯用的文字領域 (text domain) 會從 twentytwentyone 改為 ironman，翻譯檔會和目錄相同名稱。

調整 style.css 檔案註解

圖：style.css 檔案註解

style.css 的檔案註解是用來讓 WordPress 解析佈景主題的資訊，如果沒有它，WordPress 將找不到這個佈景主題。

雖然已經取代了部分字串但細節仍需要調整，例如作者、作者網址，描述等等。

最低需要版本視這個佈景主題所使用的函式最低需求的 WordPress 版本而定。以這個例子來說，5.3 是最低需求的 WordPress 版本，想要往下支援更多，可以檢查那些版型檔案或類別、函式有用到最低要求 5.3 才能使用，將它拔除。

決定風格

我們只是要 twentytwentyone 的骨架，讓我們的起步更容易，並不是要它已經定義好的 CSS 樣式。因次必須決定風格走向，例如：

1. 自己手刻 CSS，還是使用 CSS 框架。
2. 偏向的色系、字體大小。
3. 網頁的佈局，例如雜誌風格、相本風格，還是一般風格。
4. 更多考量...。

要進行開發的佈景主題名稱定好了，目錄也已建立，挑選當作開發骨架用的基底佈景主題，並稍加修改後，我們就可以開始進行設計了。

總結

以現階段來看，練習設計傳統佈景主題可以學習到的 WordPress 設計概念會較多，而且架構較直覺，比較容易入門。

下一篇文章，會進入 functions.php 的內容，用一些在前面章節學過的鉤點，瞭解佈景主題相關的函式來決定這個佈景主題要提供的功能有那些。

課後思考：

推出佈景主題供大眾下載後，使用者是否可以移除頁尾的版權連結？

前篇解答參考：

推出提供多樣區塊的外掛會較多人使用，如果有更精采的功能可以歸在 Pro 功能，需要付費才能使用，也是目前外掛生態系常用來營利的方式。